<div class="style-panel">
    <div class="farris-group-wrap property-item">
        <div class="form-group farris-form-group">
            <label class="col-form-label mb-0">
                <div class="wrap" (click)="onChangeBorderDetailPanel()">
                    <span class="f-icon f-icon-arrow-60-right mr-1" *ngIf="!showBorderDetail"> </span>
                    <span class="f-icon f-icon-arrow-60-down mr-1" *ngIf="showBorderDetail"> </span>
                    <span class="farris-label-text">边框</span>
                </div>
            </label>

        </div>
    </div>

    <!-- 边框 -->
    <div class="farris-group-wrap property-item detail-panel" [hidden]="!showBorderDetail">
        <div>
            <div class="border-panel">
                <div class="left-pane">
                    <div class="direction-panel">
                        <div [class.active]="selectedBorderDirection==='left'"
                            (click)="onChangeBorderDirection('left')">
                            <span title="左边框">┣</span>
                        </div>
                    </div>
                    <div class="direction-panel">
                        <div [class.active]="selectedBorderDirection==='top'" (click)="onChangeBorderDirection('top')">
                            <span title="上边框">┳</span>
                        </div>
                        <div [class.active]="selectedBorderDirection==='all'" (click)="onChangeBorderDirection('all')">
                            <span title="全部">╋</span>
                        </div>
                        <div [class.active]="selectedBorderDirection==='bottom'"
                            (click)="onChangeBorderDirection('bottom')">
                            <span title="下边框">┻</span>
                        </div>
                    </div>
                    <div class="direction-panel">
                        <div [class.active]="selectedBorderDirection==='right'"
                            (click)="onChangeBorderDirection('right')">
                            <span title="右边框">┫</span>
                        </div>
                    </div>
                </div>
                <div class="right-pane">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label mb-0">
                            <div class="wrap"><span class="farris-label-text"></span>线型</div>
                        </label>
                        <div class="component">
                            <div class="farris-input-wrap">
                                <farris-combo-list [(ngModel)]="border[selectedBorderDirection].style"
                                    [idField]="'value'" [textField]="'text'" [data]="borderStyleTypes"
                                    [editable]="false" [multiSelect]="false" [enableClear]="false"
                                    [enableCancelSelected]="false" [nosearch]="false"
                                    (ngModelChange)="onChangeBorderInDirection('style')">
                                </farris-combo-list>
                            </div>
                        </div>
                    </div>
                    <div class="form-group farris-form-group">
                        <label class="col-form-label mb-0">
                            <div class="wrap"><span class="farris-label-text"></span>宽度</div>
                        </label>
                        <div class="component">
                            <div class="farris-input-wrap">
                                <farris-number-spinner [(ngModel)]="border[selectedBorderDirection].width"
                                    [precision]="0" [min]="0" [max]="10" [canNull]="true"
                                    (ngModelChange)="onChangeBorderInDirection('width')" placeholder=" ">
                                </farris-number-spinner>
                            </div>
                        </div>
                    </div>
                    <div class="form-group farris-form-group">
                        <label class="col-form-label mb-0">
                            <div class="wrap"><span class="farris-label-text"></span>颜色</div>
                        </label>
                        <div class="component">
                            <div class="farris-input-wrap">
                                <colorpicker-plus [elementConfig]="border[selectedBorderDirection].colorConfig"
                                    [presets]="presetBorderColors" (valueChanged)="onChangeBorderColor($event)">
                                </colorpicker-plus>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- 圆角 -->
    <div class="farris-group-wrap property-item detail-panel" [hidden]="!showBorderDetail">
        <div>
            <div class="border-panel">

                <div class="left-pane">
                    <div class="direction-panel">
                        <div [class.active]="selectedRadiusDirection==='top-left'"
                            (click)="onChangeRadiusDirection('top-left')">
                            <span title="左上角">┏</span>
                        </div>
                        <div [class.active]="selectedRadiusDirection==='bottom-left'"
                            (click)="onChangeRadiusDirection('bottom-left')">
                            <span title="左下角">┗</span>
                        </div>
                    </div>
                    <div class="direction-panel">
                        <div [class.active]="selectedRadiusDirection==='all'" (click)="onChangeRadiusDirection('all')">
                            <span title="全部">╋</span>
                        </div>
                    </div>
                    <div class="direction-panel">
                        <div [class.active]="selectedRadiusDirection==='top-right'"
                            (click)="onChangeRadiusDirection('top-right')">
                            <span title="右上角">┓</span>
                        </div>
                        <div [class.active]="selectedRadiusDirection==='bottom-right'"
                            (click)="onChangeRadiusDirection('bottom-right')">
                            <span title="右下角">┛</span>
                        </div>
                    </div>
                </div>
                <div class="right-pane">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label mb-0">
                            <div class="wrap"><span class="farris-label-text"></span>圆角</div>
                        </label>
                        <div class="component">
                            <div class="farris-input-wrap">
                                <farris-number-spinner [(ngModel)]="radius[selectedRadiusDirection]" [precision]="0"
                                    [min]="0" [max]="30" [canNull]="true" (ngModelChange)="onChangeRadiusValueInDirection()"
                                    placeholder=" ">
                                </farris-number-spinner>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>